<template>
  <el-row class="treecom" style="width: 100%;">
    <el-col :span="12">
      <i v-if="data.isHead" class="el-icon-eleme"></i>
      <span :class="{ title: data.isHead }">{{ data.name }}</span>
    </el-col>
    <el-col :span="12" style="text-align: right;">
      <span class="manager">
        {{ data.manager }}
      </span>
      <el-dropdown>
        <span class="el-dropdown-link">
          操作<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>添加子部门</el-dropdown-item>
          <el-dropdown-item v-if="!data.isHead">查看部门</el-dropdown-item>
          <el-dropdown-item v-if="!data.isHead">删除部门</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script>
export default {
  // data: 使用树操作栏的数据源
  props: ['data']
}
</script>

<style lang="scss">
.treecom {
  padding-bottom: 10px;

  .title {
    font-weight: 700;
  }
  .manager {
    font-size: 14px;
    margin-right: 20px;
  }
}
</style>

